<template>

  <a-modal v-model:open="open" :title="fromModel?.roleId?'编辑':'新增'"

  cancel-text="取消"
           :confirm-loading="confirmLoading" @ok="handleOk" @cancel="close" @close="close">
   <div>
     <a-form
         ref="formRef"
         :model="fromModel"
         :rules="rules"
        :label-col="{ span: 5 }"
     >


       <a-form-item label="角色名称" name="roleName">
         <a-input v-model:value="fromModel.roleName"  placeholder="请输入角色名称" allow-clear/>
       </a-form-item>
       <a-form-item label="角色编码" name="roleCode" >
         <a-input v-model:value.trim="fromModel.roleCode" placeholder="请输入角色编码" allow-clear/>
       </a-form-item>
       <a-form-item label="权限菜单" name="menuIdList">

<!--         <a-tree-select
             v-model:value="fromModel.menuIdList"
             style="width: 100%"
             :tree-data="treeData"

             allow-clear
             multiple
             placeholder="请勾选权限"
             tree-node-filter-prop="label"
             @select="treeChange"
             treeDefaultExpandAll
             :maxTagCount="3"
             :field-names="{
            children: 'children',
            label: 'name',
            value: 'menuId',
          }"
         />-->
         <a-tree

             v-model:checkedKeys="fromModel.menuIdList"
             v-model:selectedKeys="fromModel.menuIdList"
             checkable
             defaultExpandAll
             :tree-data="treeData"
             :height="300"
             :field-names="{
                children: 'children',
                title: 'name',
                value:'menuId',
                key:'menuId',
             }"
         >

         </a-tree>
       </a-form-item>
       <a-form-item label="角色描述" name="roleDesc">
         <a-input v-model:value="fromModel.roleDesc" placeholder="角色描述" allow-clear/>
       </a-form-item>


     </a-form>
   </div>
  </a-modal>
</template>
<script setup lang="ts">
import {ref, defineProps, defineEmits, watch, defineComponent, computed, onMounted} from 'vue'
import {Role} from "@/types/global.ts";
import myIcon from '@/components/my-icon/index.vue'
import {saveRole,editRole} from "@/api/sys-setting/role.ts";
import {menuSelectTree} from "@/api/sys-setting/menu.ts";
import {useSystemStore} from '@/stroe'
import { TreeSelect } from 'ant-design-vue';
import { useRouter} from "vue-router";
defineComponent({
  myIcon
})
  const props = defineProps(['user','modelValue']);
const systemStore =useSystemStore();
const userRoleList =  computed(()=>systemStore.userInfo?.roleList);
const roleOption = ref<any>([]);

const router = useRouter();
  const emits = defineEmits(['update:modelValue','success']);
  const generateRole = ():Role=>{
    return{
      roleId:0,
      roleName:'',
      roleCode:'',
      roleDesc:'',
      menuIdList:[],
    }
  }
  const treeData = ref([])
//@ts-ignore
const SHOW_PARENT = TreeSelect.SHOW_ALL;
  const fromModel = ref(generateRole());
  const open = ref(false)
  const confirmLoading = ref(false);
  const formRef = ref();

const rules = {
  roleName:[
    { required: true, message: '角色名称不能为空'}
  ],

  roleCode:[
    { required: true, message: '角色code不能为空'}
  ],
  menuIdList:[
    { required: true, message: '权限不能为空'}
  ],

}
const close = ()=>{
  fromModel.value = generateRole();
  confirmLoading.value = false;
  emits('update:modelValue',false)
}
const queyrMenuSelectTree = () => {
  menuSelectTree().then((res:any)=>{
    treeData.value = res.result
    console.log(treeData.value)
  })
}
  const handleOk = ()=>{
    console.log(fromModel.value)
    formRef.value
        .validate()
        .then(async () => {
          confirmLoading.value = true;
          if (fromModel.value.roleId){
           await editRole(fromModel.value);

          }else {
            await saveRole(fromModel.value)
          }

          confirmLoading.value = false;
          emits('success')
          systemStore.refreshMenu(router);
        })
        .catch(error => {
          confirmLoading.value = false;
          console.log('error', error);
        })
  }

  onMounted(()=>{
    queyrMenuSelectTree()
  })

  watch(()=>props.user,(value)=>{

    fromModel.value = value;
    //@ts-ignore
    fromModel.value.password = null
  },{immediate:true,deep:true})
  watch(()=>props.modelValue,(value)=>{
  open.value = value;
},{immediate:true})

</script>
<style scoped lang="scss">
.icon-group{
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  max-height: 300px;
  overflow: auto;
  .icon-item{
    margin: 5px;
    border:1px solid #949090;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    border-radius: 5px;
    &.active{
      border:2px solid #0cacd3;
    }
  }
}
</style>
